<template>
    <div>
        <template v-if="items.length < 4">
            <slot/>
        </template>

        <template v-else>
            <el-dropdown @command="onCommand">
                <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>

                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, idx) in items"
                                      :key="idx"
                                      :command="item.command"
                    >
                        {{ item.label }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </template>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import KTableActionItem from '@/components/table-actions/item.vue';

@Component({
    name: 'KTableActions',
    provide() {
        return {
            actions: this,
        }
    }
})
export default class KTableActions extends Vue {
    items: KTableActionItem[] = [];

    created() {
        this.$on('k-table-bind:add', (item: KTableActionItem) => {
            this.items.push(item);
        });

        this.$on('k-table-bind:click', (item: any) => {
            this.$emit('command', item.command);
        });
    }

    onCommand(cmd: string) {
        this.$emit('command', cmd);
    }
}
</script>

<style scoped lang="scss">
.el-dropdown-link {
    cursor: pointer;
    color: #409eff;
}
</style>
